<template>
  <div class='container'>试题录入
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <!-- <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item> -->
  <el-form-item label="学科" prop="subjectID" >
    <el-select v-model="ruleForm.subjectID" placeholder="请选择活动区域"  style="width: 50%;"  >
      <el-option v-for="item in from" :key="item.id"    :label="item.subjectID"     :value="item.subjectID">

      </el-option>
      <!-- <el-option label="区域二" value="beijing"></el-option> -->
    </el-select>
  </el-form-item>

<el-form-item label="目录" prop="catalogID" >
    <el-select v-model="ruleForm.catalogID" placeholder="请选择活动区域"  style="width: 50%;"    >
      <el-option   v-for="item in from" :key="item.id"      :label="item.catalogID" :value="item.catalogID"></el-option>
      <!-- <el-option label="区域二" value="beijing"></el-option> -->
    </el-select>
  </el-form-item>

<el-form-item label="企业" prop="enterpriseID" >
    <el-select v-model="ruleForm.enterpriseID" placeholder="请选择活动区域"  style="width: 50%;"    >
      <el-option
      v-for="item in from" :key="item.id"
       :label="item.enterpriseID" :value="item.enterpriseID"></el-option>
      <!-- <el-option label="区域二" value="beijing"></el-option> -->
    </el-select>
  </el-form-item>

  <!-- <el-form-item label="活动时间" required>
    <el-col :span="11">
      <el-form-item prop="date1">
        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" ></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2"></el-col>
    <el-col :span="11">
      <el-form-item prop="date2">
        <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" ></el-time-picker>
      </el-form-item>
    </el-col>
  </el-form-item> -->

  <el-form-item label="城市" prop="province"   >

     <el-col :span="11" >
        <el-form-item>
    <el-select v-model="ruleForm.province" placeholder="请选择活动区域"

     style="width: 100%;" >
      <el-option label="区域一" value="shanghai"   ></el-option>
      <el-option label="区域二" value="beijing"></el-option>
      </el-select>
      </el-form-item>
        </el-col>

        <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>

<!-- <el-row :gutter="20"> -->
      <el-col :span="11"    >
          <el-form-item>
    <el-select v-model="ruleForm.city" placeholder="请选择活动区域"  style="width: 100%;"    >
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
         </el-select>
          </el-form-item>
        </el-col>
<!-- </el-row> -->
  </el-form-item>

<el-form-item label="方向" prop="direction" >
    <el-select v-model="ruleForm.direction" placeholder="请选择活动区域"  style="width: 50%;"  >
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>

  <!-- <el-form-item label="即时配送" prop="delivery">
    <el-switch v-model="ruleForm.delivery"></el-switch>
  </el-form-item> -->
  <!-- <el-form-item label="活动性质" prop="type">
    <el-checkbox-group v-model="ruleForm.type">
      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
      <el-checkbox label="地推活动" name="type"></el-checkbox>
      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item> -->
  <el-form-item label="题型" prop="questionType">
    <el-radio-group v-model="ruleForm.questionType">
      <el-radio label="单选"></el-radio>
      <el-radio label="多选"></el-radio>
      <el-radio label="简答"></el-radio>
    </el-radio-group>
  </el-form-item>

<el-form-item label="难度" prop="difficulty">
    <el-radio-group v-model="ruleForm.difficulty">
      <el-radio label="简单"></el-radio>
      <el-radio label="一般"></el-radio>
      <el-radio label="困难"></el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item label="活动形式"   prop="question" >
     <!-- <el-input type="textarea" v-model="ruleForm.desc"></el-input> -->
     <div  class="w1"    >
         <!-- <editor-bar :content.sync="ruleForm.question" @editorData="changeText"></editor-bar> -->
         <editor-bar :content.sync="ruleForm.question"></editor-bar>
     </div>

</el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>

  </div>
</template>

<script>
import { add, list } from '@/api/hmmm/questions'
import EditorBar from '@/components/editoritem.vue'
export default {
  components: { EditorBar },
  data () {
    return {
      ruleForm: {

        subjectID: 121,
        catalogID: 2,
        enterpriseID: 12,
        province: '北京',
        city: '昌平',

        direction: 'o2o',
        questionType: '3',
        difficulty: '1',
        question: '8',
        options: [{
          code: '1',
          title: '1',
          img: '1',
          isRight: true
        }],
        videoURL: '1',
        answer: '1',
        remarks: '1',
        tags: '1',
        isPerfect: true
      },
      rules: {
        name: [
          { required: false, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        // date1: [
        //   { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        // ],
        // date2: [
        //   { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        // ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [
          { required: false, message: '请填写活动形式', trigger: 'blur' }
        ]
      },
      from: [{
        addDate: '2020-05-05T09:12:52.000Z',
        answer: '<p>无</p>',
        catalog: 'css基础',
        catalogID: 5,
        city: '和平区',
        creator: '超级管理员',
        creatorID: 2,
        difficulty: '1',
        direction: '企业服务',
        enterprise: '美团',
        enterpriseID: 12,
        id: 29,
        number: 'ck9tp300z0001kwo5hztbh95s',
        question: '<p>1+1等于几？</p>',
        questionType: '1',
        remarks: '无',
        subject: '前端',
        subjectID: 4,
        tags: 'css3,bfc',
        videoURL: 'https://v-cdn.zjol.com.cn/277004.mp4'
      }]
    }
  },
  async  created () {
    const res = await list({})
    console.log(res.data.items)
    this.from = res.data.items
  },

  methods: {

    changeText (val) {
      console.log(val)
    },
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const res = await add(this.ruleForm)
          console.log(res)

          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  },

  // 监听富文本的输入
  catchData (e) {
    console.log('e=====?>', e)
  },
  // 富文本中的内容
  editorContent (e) {
    console.log('e=====?>', e)
  }
}
</script>

<style scoped lang='scss'>

.el-col{
  width: 25%;
  //  .line{
  //    width: 20px;
  //  }
}
.demo-ruleForm{
  width: 100%;
}
.w1{
  width: 90%;
  // height: 3000px;
}
</style>
